<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <style>
      .wrap {
        width: 100%;
        height: 100%;
      }
      .ALL {
        width: 100%;
        height: 30px;
        display: flex;
        align-items: center;
      }
      .item {
        width: 100%;
        height: 100px;
        border: 2px solid #ccc;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }
      input {
        width: 20px;
        height: 20px;
      }
      img {
        height: 90px;
        border: 2px solid #ccc;
      }
      .item button {
        height: 20px;
      }
      .item > button {
        width: 80px;
        height: 30px;
        font-size: 16px;
      }
      .item > p > input {
        width: 60px;
        height: 16px;
        margin: 0 10px;
      }
      /* .ALL > .TotalPrice{

      } */
    </style>
  </head>
  <body>
    <div class="ALL"><span>全选：</span><input type="checkbox" id="" /></div>
    <div class="wrap">
      <!-- <div class="item">
        <input type="checkbox" />
        <img
          src="https://ecmb.bdimg.com/tam-ogel/868558253_1500824529_1600_1200.jpg"
        />
        <p>名称</p>
        <p>单价</p>
        <p>
          <button>-</button><input type="text" value="5" /><button>+</button>
        </p>
        <button>删除</button>
      </div>-->
    </div>
    <p>总价：<span class="TotalPrice"></span></p>
  </body>
  <script>
    // 数据驱动页面理念，每次更改数据之后，进行页面的重新渲染
    let All = document.querySelector(".ALL input");
    var listArr = [
      {
        cid: 985, //唯一标识
        pname: "小米su7",
        price: 210000,
        imgUrl:
          "https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_1.jpg",
        num: 1,
        isSelected: true, //用来记录单选框是否勾选
      },
      {
        cid: 211,
        pname: "秦L",
        price: 98000,
        imgUrl:
          "https://ecmb.bdimg.com/tam-ogel/868558253_1500824529_1600_1200.jpg",
        num: 2,
        isSelected: true,
      },
    ];
    // 判断本地数据是否为空，如果空listArr加载临时数据，反之将本地数据赋值给listArr
    // locallStorage中没值时，返回值为null
    if (localStorage.getItem("CartData") != null) {
      listArr = JSON.parse(localStorage.getItem("CartData"));
    }
    //数据渲染函数
    function loadList() {
      let Box = document.querySelector(".wrap");
      let Total = document.querySelector(".TotalPrice");
      let Html = "";
      // console.log(listArr);
      let sum = 0;
      listArr.forEach((item, index) => {
        Html += `
            <div class="item">
              <input type="checkbox" ${
                item.isSelected ? "checked" : ""
              } onchange="Change(${index})"/>
              <img src="${item.imgUrl}"/>
              <p>${item.pname}</p>
              <p>${item.price}</p>
              <p>
                <button onclick="reduceClick(${index})">-</button><input type="text" value="${
          item.num
        }" /><button onclick="addClick(${index})">+</button>
              </p>
              <p>单价：<span class="sum_price">${
                item.num * item.price
              }</span></p>
              <button onclick="delClick(${index})">删除</button>
            </div>
          `;
        item.isSelected ? (sum += item.num * item.price) : (sum += 0);
      });
      Box.innerHTML = Html;
      Total.innerText = sum;
      if (
        listArr.every(function (item) {
          return item.isSelected == true;
        })
      ) {
        All.checked = true;
      }
      localStorage.setItem("CartData", JSON.stringify(listArr));
    }
    loadList();
    // 加函数，根据索引进行数组元素的num更改，并重新渲染
    function addClick(index) {
      listArr[index].num++;
      loadList();
    }
    // 减函数，根据索引进行数组元素的num更改，并重新渲染
    function reduceClick(index) {
      listArr[index].num > 1 ? listArr[index].num-- : 1;
      loadList();
    }
    // 删除函数，根据索引进行数组元素删除，并重新渲染
    function delClick(index) {
      listArr.splice(index, 1);
      loadList();
    }
    // 单选框更改函数
    function Change(index) {
      listArr[index].isSelected = !listArr[index].isSelected;
      All.checked = listArr.every(function (item) {
        return item.isSelected == true;
      });
      loadList();
    }
    // 全选框函数
    All.onchange = function () {
      console.log(All.checked);
      listArr.forEach((item) => {
        item.isSelected = All.checked;
        console.log(item.isSelected);
      });
      loadList();
    };
  </script>
</html>
